<template>
  <view>
    <view class="cardList" v-if="cardList.length>0&&!loading">
      <view v-for="(item,index) in cardList" :key="index">
        <view class="item" @tap="goDetail(item)">
          <view class="item-p1">{{item.fee.templateName}}</view>
          <view class="item-p2">{{item.remark}}</view>
          <image src="../../image/next.png" class="item-next" />
          <view class="item-p2" v-if="item.chargType==1">
            <text
              v-if="item.monthSet.date_type_switch=='1'"
              style="padding-right:15px"
            >可用日期:{{item.monthSet.date_type_name=='1'?'工作日':'节假日'}}</text>
            <text
              v-if="item.monthSet.available_period_switch=='1'"
            >可用时段:{{item.monthSet.free_start_time}}-{{item.monthSet.free_end_time}}</text>
          </view>
          <view class="item-p3" v-if="item.chargType==1">
            <view>
              月卡:
              <text class="red-color">{{item.rules[0].pmr_unit_price}}元</text>
            </view>
            <view>
              季卡:
              <text class="red-color">{{item.rules[1].pmr_unit_price}}元</text>
            </view>
            <view>
              {{item.rules.length==4?'半':''}}年卡:
              <text class="red-color">{{item.rules[2].pmr_unit_price}}元</text>
            </view>
            <view v-if="item.rules[3].length==4">
              年卡:
              <text class="red-color">{{item.rules[3].pmr_unit_price}}元</text>
            </view>
          </view>
          <view  v-if="item.chargType==2">
          <view class="item-p3" v-if="item.timeDay>0">
            <view v-for="(entry,ele) in item.rules" :key="ele">
              满<text class="red-color" style="padding:0">{{entry.pmr_original_price}}元</text><text style="padding:0">送</text>
              <text class="red-color" style="padding-right:10px;margin-left:-4px">{{entry.discount}}元</text>
            </view>
          </view>
          <view class="item-p3" v-else>可储值100元，200元，500元，或自定义储值</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="cardList.length==0&&!loading" class="empty">
      <image src="../../image/empty2.png" class="empty-img1" />
      <view class="empty-p1">
        该停车场暂无<text v-if="chargType=='1'">月租卡!</text>
        <text v-else-if="chargType=='2'">储值卡!</text>
        <text v-else>卡类!</text>
      </view>
    </view>
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import "./cardList.less";
import bulterApi from "@souche2014/bulter-api";
import { request } from "../../util/axios.js";
const api = bulterApi({ partner: "IOParking" });
export default {
  data() {
    return {
      apiBaseUrl: process.env.IOParking.API_HOST, //请求头
      cardList: [],
      parkId: 0,
      rules: [],
      loading: false,
      chargType: 0 //1:月租 2：储值
    };
  },
  onLoad: function(options) {
    let that = this;
    if (options.parkId) {
      //体验开发版本扫码获得参数
      console.log("体验扫码参数:", options);
      that.parkId = options.parkId ? options.parkId : "";
      that.chargType = options.chargType ? options.chargType : "";
    } else if (options.q) {
      //正式版扫码获得参数
      let qrUrl = decodeURIComponent(options.q);
      that.parkId = that.getQueryString(qrUrl, "parkId");
      that.chargType = that.getQueryString(qrUrl, "chargType");
      console.log(
        "正式扫码parkingCode，channelCode:",
        that.parkingCode,
        that.channelCode
      );
    }
    that.getcardList();
  },
  onPullDownRefresh() {
    this.getcardList();
    Taro.stopPullDownRefresh(); //结束刷新
  },
  onShareAppMessage: function() {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"]
    });
  },
  //用户点击右上角分享朋友圈
  onShareTimeline: function() {
    return {
      title: this.chargType == "1" ? "月租卡" : "储值卡",
      query: {
        parkId: this.parkId,
        chargType: this.chargType
      }
    };
  },
  created() {},
  methods: {
    getcardList() {
      var that = this;
      that.loading = true;
      Taro.showLoading({
        title: "加载中",
        mask: true
      });
      let params = {
        parkId: that.parkId,
        chargType: that.chargType
      };
      request("/onlinepayment/getparkfee", params).then(res => {
        console.log(res);
        that.loading = false;
        that.cardList = res.data;
        that.cardList.forEach((element, index) => {
          var t1 = new Date(element.endTime.replace(/-/g, "/"));
          var t2 = new Date();
          var timeDay = t1 - t2 + 16 * 3600 * 1000;
          console.log(timeDay)
          if (element.chargType == 1) {//月租
            element.monthSet=JSON.parse(element.fee.ruleDetail)
            if(timeDay<0){//过期
              let temp = JSON.parse(element.fee.ruleDetail);
              element.rules=temp.chargingStandard;
            }else{
              let temp = JSON.parse(element.chargStandard);
              element.rules=temp;
            }
          }else if(element.chargType==2){//储值
              element.timeDay=timeDay
              element.rules=JSON.parse(element.chargStandard);
          }
        });
        console.log(that.cardList)
      });
    },
    goDetail(item) {
      var that = this;
      var base = that.apiBaseUrl;
      var params = {
        parkId: that.parkId,
        chargId: item.feeId
      };
      request("/onlinepayment/isoveronline", params).then(res => {
        if (item.chargType == "1") {
          Taro.navigateTo({
            url: "../openCard/monthRecharge?id=" + item.feeId
          });
        } else if (item.chargType == "2") {
          Taro.navigateTo({
            url: "../openCard/storedRecharge?id=" + item.feeId
          });
        }
      });
    },
    //解析链接方法
    getQueryString(url, name) {
      var reg = new RegExp("(^|&|/?)" + name + "=([^&|/?]*)(&|/?|$)", "i");
      var r = url.substr(1).match(reg);
      if (r != null) {
        return r[2];
      }
      return null;
    }
  }
};
</script>

